<template>
    <div class="h-full flex flex-col">
        <mrc_ess_Table @add="handleAdd" @view="handleView" @edit="handleEdit" :name="props.name" :opt="props.opt"
            :showAddBtn="props.showAddBtn" :showPagination="props.showPagination" :items="items"
            :tableFields="tableFields">
            <template v-slot:item.status="{ item }">
                <div class="flex align-center justify-center">
                    <v-chip size="small" class="!min-w-[26px] !h-[16px] flex justify-center" variant="flat"
                        color="success">
                        <span class="text-white text-[10px]">On</span>
                    </v-chip>
                    <!-- <v-chip size="small" class="!min-w-[26px] !h-[16px] flex justify-center" variant="flat" color="grey">
                        <span class="text-white text-[10px]">Off</span>
                    </v-chip> -->
                </div>
            </template>
        </mrc_ess_Table>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(["view", "edit", "del", "add"]);
const props = defineProps({
    // 表格的名字 ps:用于eventBus的事件调用，和表格参数缓存记录
    name: {
        type: String,
        default: ""
    },
    // 表头
    tableFields: {
        type: Array,
        default: () => [{ key: "name", i18n: "label_name" }, { key: "code", i18n: "label_code" }, { key: "status", i18n: "label_status", align: "center", width: 80 }, { key: "opt", width: 64, align: "center" }]
    },
    // 显示的操作
    opt: {
        type: Array,
        default: () => ["view"]
    },
    // 是否显示添加按钮
    showAddBtn: {
        type: Boolean,
        default: false
    },
    // 是否显示分页
    showPagination: {
        type: Boolean,
        default: true
    }
})

/**
 * 点击查看
 * @param obj 
 */
function handleView(obj: any) {
    emit("view", obj);
}
/**
 * 点击编辑
 * @param obj 
 */
function handleEdit(obj: any) {
    emit("edit", obj);
}
/**
 * 点击添加
 */
function handleAdd() {
    emit("add");
}

const tableFields = ref<any>(props.tableFields)

const items = [
    {
        name: 'Group Name',
        code: "1",
        date: true,
        status: "Drafted",
        id: 1
    },
    {
        name: 'Group Name',
        code: "23",
        date: true,
        status: "Drafted",
        id: 2
    },
    {
        name: 'Group Name',
        code: "456",
        date: true,
        status: "Drafted",
        id: 3
    },
    {
        name: 'Group Name',
        code: "789",
        date: true,
        status: "Drafted",
        id: 4
    },
    {
        name: 'Group Name',
        code: "11111",
        date: true,
        status: "Drafted",
        id: 5
    },
    {
        name: 'Group Name',
        code: "22222",
        date: true,
        status: "Drafted",
        id: 6
    },
    {
        name: 'Group Name',
        code: "33333",
        date: true,
        status: "Drafted",
        id: 7
    },
    {
        name: 'Group Name',
        code: "44444",
        date: true,
        status: "Drafted",
        id: 8
    },
    {
        name: 'Group Name',
        code: "55555",
        date: true,
        status: "Drafted",
        id: 9
    },
    {
        name: 'Group Name',
        code: "66666",
        date: true,
        status: "Drafted",
        id: 10
    },
    {
        name: 'Group Name',
        code: "77777",
        date: true,
        status: "Drafted",
        id: 11
    },
    {
        name: 'Group Name',
        code: "88888",
        date: true,
        status: "Drafted",
        id: 12
    },
    {
        name: 'Group Name',
        code: "99999",
        date: true,
        status: "Drafted",
        id: 13
    },
    {
        name: 'Group Name',
        code: "1010101010",
        date: true,
        status: "Drafted",
        id: 14
    },
    {
        name: 'Group Name',
        code: "101111111",
        date: true,
        status: "Drafted",
        id: 15
    },
    {
        name: 'Group Name',
        code: "10112121212",
        date: true,
        status: "Drafted",
        id: 16
    },
    {
        name: 'Group Name',
        code: "101313131313",
        date: true,
        status: "Drafted",
        id: 17
    }
]
</script>

<style scoped></style>